<!--
 * @Author: your name
 * @Date: 2020-12-28 11:32:50
 * @LastEditTime: 2020-12-30 11:46:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\views\category\index.vue
-->
<template>
  <div class="category">
    <van-sidebar
      v-model="activeKey"
      :style="{'flex-shrink': 0}"
    >
      <van-sidebar-item
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
        :to="'/category/sub/' + category.id"
      />
    </van-sidebar>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { getCategories } from '@/api/home'

export default {
  name: 'Category',
  data() {
    return {
      activeKey: 0,
      categories: []
    }
  },
  created() {
    // 查询所有分类数据
    getCategories()
      .then(res => {
        // console.log(res)
        this.categories = res.slice(1)

        // 不利用重定向 可以使用 编程式导航

        // 下一次 DOM 更新循环结束后 执行回调 callback
        this.$nextTick(() => {
          // 跳转到第一项的子分类页面中： 编程式导航
          // 传字符串
          // this.$router.push(`/category/sub/${this.categories[0].id}`)
          // 传对象
          this.$router.push(
            // {
            //   path: `/category/sub/${this.categories[0].id}`
            // }
            {
              name: 'SubCategory',
              params: {
                cid: this.categories[0].id
              }
            }
          )
        })
      })
  }
}
</script>

<style lang="scss" scoped>
  .category {
    display: flex;
  }
</style>
